<template>
  <div>
    <headers></headers>
    <input type="text" @keyup.13="keyu()" v-model="val" class="search_input" placeholder="搜索作者或书名">
    <div v-if="bookdata.length==0">
      <h5 class="search_h" >大家都在搜</h5>
      <div class="search_content">
        <p  v-for="i in datavalue" @click="searchClick(i.bookname)">{{i.bookname}}</p>
      </div>
    </div>

    <div class="search_book" v-for=" i in bookdata" @click="booklist(i.bookid)">
      <img :src="URL + i.bookimg" alt="">
      <div>
        <h6>{{i.bookname}}</h6>
        <p>{{i.bookrecommend}}</p>
        <span>{{i.videoduration}}</span>
      </div>
    </div>


  </div>

</template>

<script>
  import headers from '@/components/headers'
    export default {
        name: "search",
        data(){
          return{
            datavalue:[],
            bookdata:[],
            val:'',
          }
        },
      components:{
        headers
      },
      mounted(){


        let  date = new Date().getTime() //获取当前时间戳
        let obj ={page :1,rows:'10',timestamp:date,token :0,type:0}
        let sign =  this.md5(this.objKeySort(obj)+'44543e5367854cfcbb3a867f32fa64a2')//加密
        let url = 'https://testapi.readerday.com//v3/product/book/hotsearch'

        this.$axios.get('https://testapi.readerday.com//v3/product/book/hotsearch')
          .then((res)=>{
            console.log(res)
            this.datavalue = res.data.data
          })
      },
      methods:{
        searchClick(name){
          let  date = new Date().getTime()//获取当前时间戳
          let obj ={page :1,rows:'10',timestamp:date,token :0,word:name}
          let sign =  this.md5(this.objKeySort(obj)+'44543e5367854cfcbb3a867f32fa64a2')//加密
          let url = 'https://testapi.readerday.com//v3/product/book/search/0/'+ sign +'/'+ date +'/'+ name +'/1/10'
          this.$axios.get(url)
            .then((res)=>{
              console.log(res)
              this.bookdata = res.data.data
            })
        },//点击搜索
        keyu(){
          let  date = new Date().getTime()//获取当前时间戳
          let obj ={page :1,rows:'10',timestamp:date,token :0,word:this.val}
          let sign =  this.md5(this.objKeySort(obj)+'44543e5367854cfcbb3a867f32fa64a2')//加密
          let url = 'https://testapi.readerday.com//v3/product/book/search/0/'+ sign +'/'+ date +'/'+ this.val +'/1/10'

          this.$axios.get(url)
            .then((res)=>{
              console.log(res)
              this.bookdata = res.data.data
            })
        },//输入搜索
        booklist(id){
          this.$router.push({name:'particulars',params:{'id':id}})
        }
      },
      watch:{
        val(curVal){
          console.log(curVal);
          if(curVal==''){
            this.bookdata=[]
          }
        },
      }
    }
</script>

<style scoped>
  .search_input{
    width: 95%;
    margin: 0.08rem auto 0;
    border-radius: .08rem;
    border: 1px solid #eee;
    height: .33rem;
  }
  .search_h{
    line-height: .35rem;
    font-size: .12rem;
    text-align: left;
    margin-left: .2rem;
    color: #999;
  }
  .search_content{
    padding: .05rem .1rem;
  }
.search_content p{
  padding: 0 .1rem;
  height: .3rem;
  line-height: .3rem;
  border-radius: .15rem;
  background: #eee;
  float: left;
  margin-right: .2rem;
  margin-bottom: .1rem;
}


  .search_book{
    padding: 0  0.08rem;
    font-size: .12rem;
    text-align: left;
    margin: .1rem 0;
  }
  .search_book img{
    height: 1.1rem;
    width: .85rem;
    float: left;
    margin-right: .1rem;
  }
  .search_book h6{
    font-size: .14rem;
    margin-bottom: .05rem;
  }
  .search_book p{
    height: .7rem;
  }
</style>
